<template>
	<view class="news-list">
		<view class="news-list-item" v-for="(item,index) in options"  :key="index" @click="onNews(item)">
			<view class="news-list-item-image">
				<image :src="item.cover" mode="aspectFill"></image>
			</view>
			<view class="news-list-item-inner">
				<view class="news-list-item-title">
					<text class="news-list-item-title-content">
						{{item.title}}
					</text>
				</view>
				<view class="news-list-item-sutitle fcss">
					<view class="news-list-item-sutitle-left frsc">
						<image class="news-list-item-tips my_scale" src="/static/read.png"></image>	阅读量：{{item.view}}
					</view>
					<view class="news-list-item-sutitle-right frsc">
					  <image class="news-list-item-tips" src="/static/time.png"></image>	{{forDate(item.created_at)}}
					</view>
				</view>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		name: 'newsList',
		props: {
			options: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				scrollTop:0
			};
		},
		computed: {
			
		},
		methods:{
			onNews(item) {
				
				// #ifdef H5
					uni.navigateTo({
						url: '/pages/news/news-info/news-info?article_id=' + item.id
					});
				// #endif
				// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/news/news-info/news-info?detailDate=' + encodeURIComponent(JSON.stringify(item))
					});
				// #endif
			},
			forDate(time) {
				let date = new Date(time * 1000); 		//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = this.change(date.getDate()) + ' ';
				let h = this.change(date.getHours()) + ':';
				let m = this.change(date.getMinutes()) + ':';
				let s = this.change(date.getSeconds());
				return Y + M + D + h + m + s;
			},
			change(t) {
				if (t < 10) {
					return "0" + t;
				} else {
					return t;
				}
			}
		},
		
	}
</script>

<style>
	.news-list-item{
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 20upx;
	}
	.news-list-item:before {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.news-list-item-image{
		width: 210upx;
		height: 163upx;
		
	}
	.news-list-item-image image{
		width: 210upx;
		height: 163upx;
		border-radius: 10upx;
	}
	.news-list-item-inner{
		padding: 0 0 0 20upx;
		height: 163upx;
		position: relative; 
		width: 66%;
	}
	.news-list-item-title{
		color: #3c3c3c;
		font-size: 32rpx;
		line-height: 1.2;
	}
	.news-list-item-sutitle{
		color: #afafaf;
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		/* line-height: 1.4; */
	}
	.news-list-item-sutitle view{
		font-size: 26upx;
	}
	.news-list-item-sutitle-left{
		flex:1;
	}
	.news-list-item-sutitle-right{
		width: 70%;
		/* text-align: right; */
		padding: 0;
	}
	.news-list-item-tips{
		width: 25upx;
		height: 25upx;
		margin:  -5upx 15upx 0 0 ;
		vertical-align: middle;
	}
	.news-list-item-tips image{
		width: 25upx;
		height: 25upx;
	}
	.news-list-item-title-content{
		line-height: 36rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.my_scale{
		transform: scale(.85);
	}
</style>
